<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>RoughJS Map</title>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
</head>

<body>
  <canvas width="960" height="500"></canvas>

  <script type="module">
    import rough from '../../bin/rough.js';

    const canvas = document.querySelector('canvas');
    const rc = rough.canvas(canvas, {
      options: {
        simplification: 0.1,
        roughness: 0.65
      }
    });

    const width = 960, height = 500;
    const projection = d3.geo.albersUsa().scale(1070).translate([width / 2, height / 2]);
    const path = d3.geo.path().projection(projection);
    const randomColor = () => `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`;
    const randomAngle = () => (Math.random() > 0.5 ? -1 : 1) * (1 + Math.random() * 88);
    const randomStyle = () => (Math.random() > 0.5 ? 'solid' : 'hachure');

    d3.json("./us.json", (error, us) => {
      if (error) throw error;
      let topo = topojson.feature(us, us.objects.states).features;
      for (let feature of topo) {
        // if (feature.id !== 48) {
        //   continue;
        // }
        rc.path(path(feature), {
          fill: randomColor(),
          fillStyle: randomStyle(),
          hachureAngle: randomAngle()
        });
      }
    });

  </script>
</body>

</html>